<template>
  <div class="app-container waybill-list">
    <el-card shadow="hover" class="container-card">
      <template #header>运单管理</template>
      <el-form ref="waybillSearchFormData" :model="waybillSearchFormData" label-width="120px">
        <el-row :gutter="60">
          <el-col :span="8">
            <el-form-item label="运单编号：">
              <el-input v-model="waybillSearchFormData.id" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单编号：">
              <el-input v-model="waybillSearchFormData.orderId" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="调度状态：">
              <el-select
                v-model="waybillSearchFormData.schedulingStatus"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in schedulingStatus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="起始地机构:"
            >
              <tree-select :id.sync="waybillSearchFormData.startAgencyId" v-model="valueStart" class="tree-select" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="目的地机构:"
            >
              <tree-select :id.sync="waybillSearchFormData.endAgencyId" v-model="valueEnd" class="tree-select" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="当前所在机构:"
            >
              <tree-select :id.sync="waybillSearchFormData.currentAgencyId" v-model="valueCurrent" class="tree-select" />
            </el-form-item>
          </el-col>
          <el-col
            :span="8"
            style="padding-left:50px"
          >
            <el-button
              type="primary"
              @click="search"
            >搜索</el-button>
            <el-button
              plain
              class="reset-btn"
              @click="resetForm()"
            >重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <TabChange
      :default-active-index="0"
      :setting-list="settingList"
      @tabChange="tabChange"
    />
    <div
      style="margin-top: 20px"
    >
      <el-card class="tale-card-box">
        <el-button
          type="primary"
          style="margin-bottom:20px"
          @click="handleDispatch()"
        >调度配置</el-button>
        <el-table
          :data="dataList"
          border
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60"
          >
            <template slot-scope="scope">
              <span>{{
                scope.$index +
                  (waybillSearchFormData.page - 1) *
                  waybillSearchFormData.pageSize +
                  1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="运单编号"
            min-width="160"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="订单编号"
            min-width="200"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.orderId }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="运单状态"
            min-width="130"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">新建</span>
              <span v-else-if="scope.row.status == 2">已装车</span>
              <span v-else-if="scope.row.status == 3">到达</span>
              <span v-else-if="scope.row.status == 4">到达终端网点</span>
              <span v-else-if="scope.row.status == 5">已签收</span>
              <span v-else>拒收</span>
            </template>
          </el-table-column>
          <el-table-column
            label="调度状态"
            min-width="100"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.schedulingStatus == 1">待调度</span>
              <span
                v-else-if="scope.row.schedulingStatus == 2"
              >未匹配线路</span>
              <span v-else>已调度</span>
            </template>
          </el-table-column>

          <el-table-column
            label="起始营业部"
            min-width="170"
            prop="startAgencyName"
          />
          <el-table-column
            label="终点营业部"
            min-width="170"
            prop="endAgencyName"
          />
          <el-table-column
            label="当前所在机构"
            min-width="170"
            prop="currentAgencyName"
          />
          <el-table-column
            label="下一个机构"
            min-width="170"
            prop="nextAgencyName"
          />
          <el-table-column
            label="货品总体积(立方米)"
            min-width="170"
            prop="totalVolume"
          />
          <el-table-column
            label="货品总重量(千克)"
            min-width="100"
            prop="totalWeight"
          />
          <el-table-column
            label="创建时间"
            min-width="170"
            prop="created"
          />
          <el-table-column
            label="更新时间"
            min-width="170"
            prop="updated"
          />
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="85"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-link
                type="text"
                :underline="false"
                @click="skip(scope.row.id, scope.row.orderId)"
              >查看详情</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <div
            v-show="dataList && dataList.length > 0"
            class="pages"
          >
            <el-pagination
              :current-page="Number(waybillSearchFormData.page)"
              :total="Number(total)"
              :page-size="Number(waybillSearchFormData.pageSize)"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-card>
    </div>
    <el-dialog
      title="运输配置"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
      class="add-form-dialog"
    >
      <el-form
        ref="dataForm"
        label-position="right"
        label-width="140px"
        style="width: 100%"
        :rules="ruleInline"
        :model="formBase"
      >
        <el-form-item
          label="最晚任务下发时间"
          prop="dispatchTime"
        >
          <el-input
            v-model="formBase.dispatchTime"
            placeholder="请输入最晚任务下发时间"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >小时前</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="优先匹配方式"
          required
        >
          <el-select
            v-model="formBase.dispatchMethod"
            placeholder="请选择优先匹配方式"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in dispatchWaybillList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

      </el-form>

      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          class="save-btn"
          @click="confirmDispatch"
        >确认</el-button>
        <el-button
          class="cancel-btn"
          @click="handleClose"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getWaybillList, waybillStatic, getDispatch, setDispatch } from '@/api/waybill'
import TabChange from '@/components/TabChange'
// import { set } from 'vue'
export default {
  components: {
    TabChange
  },
  data() {
    return {
      waybillSearchFormData: {
        page: 1,
        pageSize: 10,
        id: '',
        orderId: '', // 订单id
        startAgencyId: null,
        endAgencyId: null,
        currentAgencyId: null
      },
      schedulingStatus: [
        {
          id: 1,
          name: '待调度'
        },
        {
          id: 2,
          name: '未匹配线路'
        },
        {
          id: 3,
          name: '已调度'
        }
      ],
      startAgencyList: [],
      destinationAgencyList: [],
      localAgencyList: [],
      dataList: [],
      settingList: [
        {
          value: null,
          label: '全部',
          num: 0
        },
        {
          value: 1,
          label: '新建',
          num: 0
        },
        {
          value: 2,
          label: '已装车',
          num: 0
        },
        {
          value: 3,
          label: '运输中',
          num: 0
        },
        {
          value: 4,
          label: '到达终端网点',
          num: 0
        },
        {
          value: 6,
          label: '拒收',
          num: 0
        }
      ],
      total: null,
      valueStart: '',
      valueEnd: '',
      valueCurrent: '',
      searchkey: false,
      dialogVisible: false,
      ruleInline: {
        dispatchTime: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value) {
                const reg = /^(?:[1-9]|([1-3][0-9])?|4[0-8])$/
                if (!reg.test(Number(value))) {
                  callback(
                    new Error('请输入1-48正整数')
                  )
                } else {
                  callback()
                }
              } else {
                callback(new Error('最晚任务下发时间不能为空'))
              }
            },
            trigger: 'blur'
          }
        ]
      },
      formBase: {
        dispatchMethod: 2,
        dispatchTime: ''
      },
      dispatchWaybillList: [
        {
          value: 1,
          label: '转运次数最少'
        },
        {
          value: 2,
          label: '成本最低'
        }
      ]
    }
  },
  created() {
    this.getWaybillStatic()
    this.initialDate()
    this.getConfig()
  },
  methods: {
    initialDate() {
      // 读取数据
      this.getList()
    },
    // 获取运单统计数据
    async getWaybillStatic() {
      const result = await waybillStatic()
      console.log(result)
      this.settingList[1].num = result[1] || 0
      this.settingList[2].num = result[0] || 0
      this.settingList[3].num = result[3] || 0
      this.settingList[4].num = result[4] || 0
      this.countFive = result[5] || 0
      this.settingList[5].num = result[6] || 0
      this.settingList[0].num =
        Number(this.settingList[1].num) +
        Number(this.settingList[2].num) +
        Number(this.settingList[3].num) +
        Number(this.settingList[4].num) +
        Number(this.countFive) +
        Number(this.settingList[5].num)
    },
    // 获取运单列表数据
    async getList() {
      // const params = { ...this.waybillSearchFormData }
      // if (params.status === 0) {
      //   delete params.status
      // }
      const result = await getWaybillList(this.waybillSearchFormData)
      // 获取数据给dataList
      this.dataList = result.items
      this.total = result.counts
    },
    getConfig() {
      getDispatch().then((res) => {
        if (res.code === 200) {
          this.formBase = res.data
          console.log(res)
        }
      }).catch((err) => {
        this.$message.error(err.msg || '获取调度配置失败')
      })
    },
    confirmDispatch() {
      // const result = await setDispatch(this.formBase)
      // console.log(result)
      this.$refs.dataForm.validate(async(valid) => {
        if (valid) {
          await setDispatch(this.formBase).then((res) => {
            console.log(res)
            if (res.code === 200) {
              this.$message({
                message: '操作成功！',
                type: 'success'
              })
              this.handleClose()
              this.getConfig()
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
        } else {
          this.$message.error('*号为必填项!')
        }
      })
    },
    handleDispatch() {
      this.dialogVisible = true
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false
    },
    // 状态变更
    tabChange(activeIndex) {
      if (activeIndex === 0) {
        activeIndex = null
      }
      this.waybillSearchFormData.status = activeIndex
      this.waybillSearchFormData.page = 1
      this.getList()
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.waybillSearchFormData.pageSize = val
      if (this.waybillSearchFormData.page === 1) {
        this.getList(this.waybillSearchFormData)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.waybillSearchFormData.page = val
      this.getList()
    },
    search() {
      this.waybillSearchFormData.page = 1
      this.getList(this.waybillSearchFormData)
      this.searchkey = true
    },
    resetForm() {
      this.$refs.waybillSearchFormData.resetFields()
      this.waybillSearchFormData = {
        page: 1,
        pageSize: 10,
        startAgencyId: null,
        endAgencyId: null,
        currentAgencyId: null,
        status: this.waybillSearchFormData.status
      }
      this.searchkey = false
      this.valueCurrent = ''
      this.valueEnd = ''
      this.valueStart = ''
      this.getList()
    },
    skip(id, orderId) {
      this.$router.push({
        path: '/business/waybill-detail',
        query: { id: id, orderId: orderId }
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.app-container{
  .tale-card-box{
    .pagination{
       margin: 22px auto;
       text-align: center;
       span {
          font-size: 14px !important;
          color: #20232a !important;
       }
    }
  }
}
.waybill-list {
  .el-table td{
    padding: 12px 0;
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
  }
}
.el-table th {
   padding: 12px 0;
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    padding: 12px 0;
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}
.el-link{
  color:#419eff;
}
:deep(.el-card){
  overflow: initial;
}
:deep(.el-select){
  width: 100%;
}
:deep(.el-card__body){
  padding-bottom: 58px!important;
}
:deep(.el-table__body-wrapper) {
    &::-webkit-scrollbar{
     background-color: transparent;
    }
    &::-webkit-scrollbar-thumb {
     border-radius: 10px;
     border: 4px solid #fff;
     background-color: #dddee0;
    }
   }
</style>

